<template>
	<view class="container">
		<view class="header">
			<view class="headerBg"></view>
			<view class="successStatus">
				<view class="status-text">任务规则，做前必看</view>
			</view>
			<view class="task-container">
				<view class="task-header">
					<view class="headerL">
						<view class="thumb">
							<image src="../../../static/avatar.jpg" mode=""></image>
						</view>
						<view class="text">
							<view class="title">
								{{formData.name}}
							</view>
							<view class="tasknum">
								剩余数量：<text>{{formData.item_surplus_quantity}}</text>/{{formData.item_quantity}}
							</view>
						</view>
					</view>
					<view class="money">
						+{{formData.item_price}}金币
					</view>
				</view>
			</view>
			<view class="task-main">
				<view class="notice">
					<view class="notice-text">
						注意！所有加QQ微信/淘宝刷单/拆红包必中，全是骗子！勿贪便宜！不要付款！
					</view>
					<text class="iconfont iconjiantou"></text>
				</view>
				<view class="task-step">
					<view class="task-step-tit">
						<image src="../../../static/images/task-icon.png" mode="widthFix"></image>
						<view class="titText">
							任务步骤
						</view>
						<text>（请参照以下步骤完成任务）</text>
					</view>
					<view class="step1">
						<text>1.</text><view>点击去拼多多助力按钮，打开拼多多完成助力。</view> 
					</view>
					<view class="codeBox">
						{{formData.content}}
					</view>
					<view class="task-btn">
						<view class="code-btn" @click="clipboard(formData.content)">
							复制链接/口令
						</view>
						<view class="open-btn">
							打开拼多多助力
						</view>
					</view>
					<view class="step1">
						<text>2.</text><view>查看示例验证图，按照示例图的提示和要求正确截图上传。</view> 
					</view>
					<view class="taskImage">
						<view class="examImages" @click="previewImage">
							<image src="../../../static/images/19.jpg" mode=""></image>
							<view class="tips">
								示例验证图
							</view>
						</view>
						<view class="uploadContainer" :class="{active:active}" @click="handleUpload">
							<view class="uploadBtn" v-if="!active">
								<view class="text">
									<text class="iconfont iconxiangji-tianchong"></text>
									<text class="uploadText">添加验证图</text>
								</view>
							</view>
							<image v-if="active" class="resultImage" :src="upImage" mode=""></image>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="submit" @click="task">
			报名任务<!-- /提交验证、重新接单（已过期）grey等待审核 已结束 已完成 已关闭 -->
		</view>
	</view>
</template>

<script>
	const thorui = require("@/components/common/tui-clipboard/tui-clipboard.js")
	import {getTaskDetail, signUp} from "@/http/api.js"
	export default {
		components: {

		},
		data() {
			return {
				id: '',
				upImage: '',
				active: false,
				btnMsg: ['报名任务', '提交验证', '重新接单（已过期）', '等待审核', '已结束','已完成', '已关闭'],
				formData: {}
			}
		},
		onReady() {},
		onLoad(e) {
			this.id = e.id
		},
		mounted() {
			this.getTableData()
		},
		methods: {
			getTableData() {
				getTaskDetail(this.id).then(resp => {
					if (resp.code === '10000') {
						this.formData = resp.data
					}
				})
			},
			task() {
				signUp(this.id).then(resp => {
					if(resp.code === '10000') {
						uni.showToast({
							title: '报名成功',
							icon: "none"
						});
					}
				})
			},
			handleSetRecod() {
				uni.navigateTo({
					url: "/pages/center/myTask/myTask"
				})
			},
			handleUpload () {
				uni.chooseImage({
				    count: 1, //默认9
				    sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				    sourceType: ['album'], //从相册选择
				    success: (chooseImageRes) => {
							const tempFilePaths = chooseImageRes.tempFilePaths
				        // console.log(JSON.stringify(chooseImageRes.tempFilePaths));
								this.upImage = tempFilePaths[0]
								this.active = true
								uni.uploadFile({
									url: 'https://api.yanglao12349.com/upload', //仅为示例，非真实的接口地址
									filePath: tempFilePaths[0],
									name: 'file',
									formData: {
											'user': 'test'
									},
									success: (uploadFileRes) => {
											console.log(uploadFileRes.data);
									}
							});
				    }
				});
			},
			previewImage(e) {
				let imgArr = ['https://5b0988e595225.cdn.sohucs.com/images/20190708/9cd14d646662420bb9f0fad0a29e94ec.jpeg']
				uni.previewImage({
						urls: imgArr,
						longPressActions: {
								itemList: ['发送给朋友', '保存图片', '收藏'],
								success: function(data) {
										console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
								},
								fail: function(err) {
										console.log(err.errMsg);
								}
						}
				});
			},
			clipboard: function(data) {
				thorui.getClipboardData(data, (res) => {
					// #ifdef H5 || MP-ALIPAY
					if (res) {
						uni.showToast({
							title: '复制成功',
							icon: "none"
						});
					} else {
						uni.showToast({
							title: '复制失败',
							icon: "none"
						});
					}
					// #endif
				},event)
			}
		}
	}
</script>
<style>
	page {
		background: #F8F8F8;
	}
</style>
<style scoped lang="scss">
	.container {
		padding-bottom: 90rpx;
		.header {
			.headerBg {
				position: absolute;
				left: 0;
				top: 0;
				width: 100%;
				height: 180rpx;
				border-radius: 0 0 22rpx 22rpx;
				background: linear-gradient(#fc4250, #fe744b);
				z-index: 0;
			}

			.successStatus {
				position: relative;
				margin-bottom: 24rpx;
				padding-top: 44rpx;
				z-index: 1;
				text-align: center;
				.status-text {
					display: inline-block;
					font-size: 24rpx;
					color: #fff;
					vertical-align: middle;
					padding-bottom: 3rpx;
					border-bottom: 1px solid #fff;
				}
			}

			.task-container {
				position: relative;
				z-index: 1;
				width: 706rpx;
				margin: 0px auto 22rpx;
				padding: 32rpx 32rpx 38rpx;
				border-radius: 6rpx;
				box-sizing: border-box;
				background: #fff;

				.task-header {
					display: flex;
					-webkit-box-pack: justify;
					-webkit-justify-content: space-between;
					-ms-flex-pack: justify;
					justify-content: space-between;
					align-items: center;
					.headerL {
						display: flex;
						align-items: center;
						.thumb {
							width: 92rpx;
							height: 92rpx;
							border: 1px solid #dedfe4;
							padding: 4rpx;
							margin-right: 22rpx;
							box-sizing: border-box;
							border-radius: 50%;
							image {
								width: 100%;
								height: 100%;
								border-radius: 50%;
							}
						}
						.text {
							.title {
								margin-bottom: 18rpx;
								font-size: 26rpx;
								color: #000;
								font-weight: bold;
							}
							.tasknum {
								font-size: 24rpx;
								color: #828282;
								text {
									color: #ec6855;
								}
							}
						}
					}
					.money {
						font-size: 24rpx;
						color: #ff235b;
					}
				}
			}
			.task-main {
				position: relative;
				z-index: 1;
				width: 706rpx;
				margin: 0px auto;
				.notice {
					display: flex;
					-webkit-box-pack: justify;
					-webkit-justify-content: space-between;
					-ms-flex-pack: justify;
					justify-content: space-between;
					align-items: center;
					margin-bottom: 22rpx;
					padding: 22rpx;
					padding-right: 0rpx;
					border-radius: 6rpx;
					background: #fff;
					font-size: 24rpx;
					color: #8e8e8e;
					.notice-text {
						letter-spacing: 4rpx;
						word-spacing: 4rpx;
						padding-right: 20rpx;
					}
					.iconfont {
						font-size: 52rpx;
						color: #8e8e8e;
					}
				}
				.task-step {
					padding: 26rpx;
					border-radius: 6rpx;
					background: #fff;
					.task-step-tit {
						margin-bottom: 35rpx;
						image {
							display: inline-block;
							width: 45rpx;
							height: auto;
							margin-right: 18rpx;
							vertical-align: middle;
						}
						.titText {
							display: inline-block;
							font-size: 26rpx;
							font-weight: bold;
						}
						text {
							display: inline-block;
							font-size: 24rpx;
							color: #838383;
						}
					}
					.step1 {
						margin-bottom: 44rpx;
						display: flex;
						text {
							padding-right: 18rpx;
							color: #e6241f;
							font-weight: bold;
						}
						view {
							flex: 1;
							letter-spacing: 4rpx;
							word-spacing: 4rpx;
							font-size: 26rpx;
							color: #333;
						}
						
					}
					.codeBox {
						width: 100%;
						height: 94rpx;
						margin-bottom: 20rpx;
						line-height: 94rpx;
						padding: 0 40rpx;
						box-sizing: border-box;
						border-radius: 10rpx;
						background: #f8f8f8;
						font-size: 26rpx;
						color: #000;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}
					.task-btn {
						display: flex;
						-webkit-box-pack: justify;
						-webkit-justify-content: space-between;
						-ms-flex-pack: justify;
						justify-content: space-between;
						margin-bottom: 136rpx;
						.code-btn,.open-btn {
							width:318rpx;
							height: 62rpx;
							line-height: 62rpx;
							border-radius: 6rpx;
							font-size: 24rpx;
							text-align: center;
						}
						.code-btn {
							color: #c62816;
							background: #f6d4d2;
						}
						.open-btn {
							background: #fc4250;
							color: #fff;
						}
					}
					.taskImage {
						display: flex;
						-webkit-box-pack: justify;
						-webkit-justify-content: space-between;
						-ms-flex-pack: justify;
						justify-content: space-between;
						.examImages {
							position: relative;
							width: 312rpx;
							height: 588rpx;
							border-radius: 12rpx;
							border: 2rpx solid #7b7577;
							box-sizing: border-box;
							overflow: hidden;
							.tips {
								position: absolute;
								left: 0;
								top: 0;
								height: 38rpx;
								padding: 0 10rpx;
								line-height: 38rpx;
								border-radius: 14rpx 0 14rpx 0 ;
								background: #fe2b22;
								font-size: 24rpx;
								color: #fff;
								text-align: center;
							}
							image {
								width: 100%;
								height: 100%;
								
							}
						}
						.uploadContainer {
							width: 312rpx;
							height: 588rpx;
							overflow: hidden;
							box-sizing: border-box;
							border-radius: 12rpx;
							&.active {
								border: 2rpx solid #7b7577;
							}
							.uploadBtn {
								height: 312rpx;
								display: flex;
								border-radius: 12rpx;
								border: 1px solid #fc424d;
								text-align: center;
								align-items: center;
								.text {
									width: 100%;
									.uploadText {
										display: block;
										font-size: 26rpx;
										color: #fc424d;
									}
									.iconfont {
										display: inline-block;
										margin-bottom: 10rpx;
										font-size: 62rpx;
										color: #fc424d;
									}
								}
								
							}
							.resultImage {
								width: 100%;
								height: 100%;
							}
						}
					}
				}
			}
		}
		.submit {
			position: fixed;
			left: 0;
			bottom: 0;
			width: 100%;
			height: 90rpx;
			line-height: 90rpx;
			text-align: center;
			font-size: 28rpx;
			color: #fff;
			background: #fc4250;
			z-index: 1;
			&.grey {
				background: #888;
			}
		}
	}
</style>
